<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/static/webjars/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/static/base/common/css/sapar.css" />
    <script type="text/javascript" src="/static/webjars/echarts/echarts.js"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script src="/static/webjars/layui/layui.js" charset="utf-8"></script>
    <title>乡/镇房屋统计--详细</title>
</head>
<body>
<% String city = request.getParameter("city");
    if(city == null){
        city = "乡/镇";
    }
    %>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend><%=city%>房屋统计--详细</legend>
</fieldset>
<div style="width: 98%;height:400px;margin:auto;padding:0;" id="detail"></div>

<div style="margin:auto;" class="layui-col-lg12 layui-col-xs12 layui-col-md12">
    <table class="layui-table" id="demo" style="float:left;"></table>
</div>
<div id="precent" style="width:100%;height:500px;margin:auto"></div>


</body>
</html>
<!--柱状折线图-->
<script type="text/javascript">

    var dataitem = new Array();
    //TODO:获取数据
    $.get("/getRealHouseinfoByKey",{KeyString:"<%=city%>"},function(data){
        for(var i = 0;i < data.length;i++){
            var map = {"id":data[i].id.toString()
                ,"village":data[i].village
                ,"houses":data[i].houses.toString()
                ,"area":data[i].area.toString()
                ,"increase":data[i].increase.toString()
                ,"percent":data[i].percent
                }
                dataitem.push(map);
        }
        var charts = echarts.init(document.getElementById("detail"));
        // 指定图表的配置项和数据
        var category = [];
        var dottedBase = new Date();
        var lineData = [];
        var barData = [];
        var max = 5;
        for (var i = 0; i < data.length; i++) {
            var date = new Date(dottedBase += 1000 * 3600 * 24);
            category.push([data[i].village]);
            var b = data[i].houses;
            var d = data[i].increase;
            //var increaseper = (data[i].increasePersent*100);
            //console.log(increaseper);
            var mm = 0.0;
            if((b - d) != 0){
                mm = (d / (b - d))*100;
            }
            barData.push((b - d));
            lineData.push(b);
        }

        // option
        option = {
            backgroundColor: '#0f375f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true,
                        backgroundColor: '#333',
                        precision:2
                    }
                },
                formatter:function(params) {
                    var relVal = params[0].name + "<br/>";
                    relVal += "房屋总量" + ' : ' + params[0].value + "栋<br/>";
                    relVal += "较去年增长数量" + ' : ' + (params[0].value.toFixed(2) - params[1].value.toFixed(2)) + "栋<br/>";
                    return relVal;
                }

            },
            legend: {
                data: [{name:'房屋总量'}, {name:'去年总量'}],
                textStyle: {
                    color: '#ccc'
                }
            },
            xAxis: {
                data: category,
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            yAxis: [{
                name:'房屋总量(栋)',
                splitLine: {show: true},
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },/*{
                name:'房屋增长率(%)',
                type:'value',
                min:0,
                max:100,
                interval:10,
                axisLabel:{
                    formatter:'{value}%'
                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            }*/],
            dataZoom:{
                show:true,
                startValue:0,
                endValue:9
            }
            ,series: [{
                name: '房屋总量',
                type: 'line',
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 15,
                data: lineData
            }, {
                name: '去年总量',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#14c8d4'},
                                {offset: 1, color: '#43eec6'}
                            ]
                        )
                    }
                },
                data: barData
            }, {
                name: 'line',
                type: 'bar',
                barGap: '-100%',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: 'rgba(20,200,212,0.5)'},
                                {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                                {offset: 1, color: 'rgba(20,200,212,0)'}
                            ]
                        )
                    }
                },
                z: -12,
                data: lineData
            }, {
                name: 'dotted',
                type: 'pictorialBar',
                symbol: 'rect',
                itemStyle: {
                    normal: {
                        color: '#0f375f'
                    }
                },
                symbolRepeat: true,
                symbolSize: [12, 4],
                symbolMargin: 1,
                z: -10,
                data: lineData
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        charts.setOption(option);

//表格
        layui.use('table', function(){
            var table = layui.table;

            //展示已知数据
            table.render({
                elem: '#demo'
                ,cols: [[ //标题栏
                    {field: 'id', title: 'ID', width: 80, sort: true}
                    ,{field: 'village', title: '村名', minWidth: 120}
                    ,{field: 'houses', title: '实有房屋数量', minWidth: 150}
                    ,{field: 'area', title: '房屋占地面积', minWidth: 150}
                    ,{field: 'increase', title: '新增数量', minWidth: 100}
                    ,{field:"percent",title:'占地百分比',width:100}
                ]]
                ,data: dataitem
                // ,skin: 'line' //表格风格
                ,even: true
                ,page: true //是否显示分页
                ,limits: [5, 7, 10]
                ,limit: 10//每页默认显示的数量
                ,height:"500"
            });
        });


    var data = genData(50);
    var charts = echarts.init(document.getElementById('precent'));
    option = {
        title : {
            text: '各村实有房屋占比',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: data.legendData,
            selected: data.selected
        },
        series : [
            {
                name: '',
                type: 'pie',
                radius : '80%',
                center: ['40%', '50%'],
                data: data.seriesData,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label:{
                    normal:{
                        formatter: '{b}{d}%',
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            }
                        }
                    }
                }
            }
        ]
    };
    function genData(count) {
        var legendData = [];
        var seriesData = [];
        var selected = {};
        for (var i = 0; i < dataitem.length; i++) {
            var name = dataitem[i];
            legendData.push(name.village);
            seriesData.push({
                name: name.village,
                value: name.area
            });
            if(name.area == "0")
                selected[name.village] = false;
            else
                selected[name.village] = true;
        }

        return {
            legendData: legendData,
            seriesData: seriesData,
            selected: selected
        };
    }


    charts.setOption(option);
    });


</script>